import React from "react";
import { useLiveContext } from "./LiveContext";

import Editor from "react-simple-code-editor";
import { highlight, languages } from "prismjs/components/prism-core";
import "prismjs/components/prism-clike";
import "prismjs/components/prism-javascript";
import "prismjs/themes/prism.css"; //Example style, you can use another

export function LiveEditor(props) {
  const { code, onChange } = useLiveContext();

  return (
    <div>
      <Editor
        value={code}
        highlight={(code) => highlight(code, languages.js)}
        onValueChange={(code) => onChange(code)}
      ></Editor>
    </div>
  );
}
